{% extends "base.html" %}
{% load static %}
{% block title %}文本加密 - 数据加密平台{% endblock %}

{% block content %}
<style>
    body {
        background: linear-gradient(to right, #f5f7fa, #c3cfe2);
    }

    .encrypt-card {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        padding: 2rem;
        margin-top: 2rem;
        transition: all 0.3s ease-in-out;
    }

    .encrypt-card:hover {
        transform: translateY(-5px);
    }

    .form-control:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .result-section pre {
        font-size: 0.9rem;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .btn-primary {
        background-color: #4e73df;
        border: none;
    }

    .btn-primary:hover {
        background-color: #375ea6;
    }
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            <div class="encrypt-card">
                <h2 class="mb-4 text-center">🔒 文本加密</h2>

                <!-- 表单区域 -->
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="{{ form.plaintext.id_for_label }}" class="form-label">明文内容：</label>
                        {{ form.plaintext }}
                        {% if form.plaintext.errors %}
                            <div class="invalid-feedback d-block mt-1">{{ form.plaintext.errors.0 }}</div>
                        {% endif %}
                        <small class="form-text text-muted">请输入需要加密的文本内容</small>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">🔐 开始加密</button>
                    </div>
                </form>

                <!-- 加密结果显示 -->
                {% if encrypted_data %}
                    <hr class="my-4">

                    <h4 class="mt-5 mb-3 text-center">✅ 加密结果</h4>

                    <div class="result-section">
                        <div class="mb-3">
                            <label class="form-label fw-bold">加密后的AES密钥（Base64编码）：</label>
                            <pre>{{ encrypted_data.encrypted_aes_key }}</pre>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">加密后的数据（包含IV+Tag+Ciphertext，Base64编码）：</label>
                            <pre>{{ encrypted_data.encrypted_data }}</pre>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">数据哈希值（SHA256，Base64编码）：</label>
                            <pre>{{ encrypted_data.data_hash }}</pre>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">签名内容（ECDSA签名，Base64编码）：</label>
                            <pre>{{ encrypted_data.signature }}</pre>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">发送方公钥（PEM格式）：</label>
                            <pre>{{ encrypted_data.sender_public_key }}</pre>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
